<template>
  <div>
    <BasicDrawer
      v-bind="$attrs"
      @register="register"
      :title="displayModuleTitle"
      width="90%"
      :closeFunc="
        () => {
          $emit('success');
          return true;
        }
      "
    >
      <div style="display: flex; flex-direction: row">
        <div style="margin-right: 10px; flex: 1">
          <h2 style="font-weight: bold; font-size: 16px; margin-bottom: 15px"
            >{{ hazardInfo.title }}
            <a-popover placement="rightTop" v-if="hazardInfo.hazardid">
              <template #content>
                <QrCode
                  :value="'/pages/hazard/hazardInfo?id=' + hazardInfo.hazardid"
                  width="120"
                  ref="qrRef"
                />
                <a-button @click="download" block size="small">下载</a-button>
              </template>
              <QrcodeOutlined style="font-size: 18px" />
            </a-popover>
          </h2>
          <a-descriptions :column="6">
            <a-descriptions-item label="类别" :span="2">
              <a-tag
                v-if="hazardInfo.identificationresult"
                :color="
                  identifyOptions.filter((item) => item.value == hazardInfo.identificationresult)[0]
                    ?.color
                "
              >
                {{
                  identifyOptions.filter((item) => item.value == hazardInfo.identificationresult)[0]
                    ?.text
                }}</a-tag
              >
            </a-descriptions-item>
            <a-descriptions-item label="一般/重大" :span="2"
              ><a-tag :color="hazardInfo.ismajor ? '#cd201f' : '#3b5999'">{{
                hazardInfo.ismajor ? '重大' : '一般'
              }}</a-tag></a-descriptions-item
            >
            <a-descriptions-item label="是否上报" :span="2">
              <a-tag v-if="hazardInfo.isreport" color="red">是</a-tag>
              <a-tag v-else color="green">否</a-tag>
            </a-descriptions-item>
            <a-descriptions-item label="单元" :span="3">
              {{ hazardInfo.unitname }}
            </a-descriptions-item>
            <a-descriptions-item label="具体部位" :span="3">
              {{ hazardInfo.position ?? '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="类别" :span="2">{{
              hazardInfo.categoryname
            }}</a-descriptions-item>
            <a-descriptions-item label="项目" :span="2">{{
              hazardInfo.projectname
            }}</a-descriptions-item>
            <a-descriptions-item label="危险源" :span="2"
              >{{ hazardInfo.hazardname }}
            </a-descriptions-item>
            <a-descriptions-item label="事故诱因" :span="6">
              {{ hazardInfo.couse ?? '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="可能导致的后果" :span="6">{{
              hazardInfo.maycouseharm ?? '-'
            }}</a-descriptions-item>
            <a-descriptions-item label="描述" :span="6">
              {{ hazardInfo.description ?? '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="最近辨识时间" :span="2">{{
              hazardInfo.recentidentificationtm?.split(' ')[0] ?? '-'
            }}</a-descriptions-item>
            <a-descriptions-item :span="2" label="风险等级">
              <a-tag
                v-if="hazardInfo.risklevel"
                :color="
                  riskLevelOptions.filter((item) => item.value == hazardInfo.risklevel)[0]?.color
                "
              >
                {{
                  riskLevelOptions.filter((item) => item.value == hazardInfo.risklevel)[0]?.text
                }}</a-tag
              >
              <span v-else>-</span>
            </a-descriptions-item>
            <a-descriptions-item :span="2" label="风险评价时间">{{
              hazardInfo.evltm?.split(' ')[0] ?? '-'
            }}</a-descriptions-item>

            <a-descriptions-item label="责任部门" :span="2">{{
              hazardInfo.resdeptname ?? '-'
            }}</a-descriptions-item>
            <a-descriptions-item label="责任人" :span="2">{{
              hazardInfo.resusername ?? '-'
            }}</a-descriptions-item>
            <a-descriptions-item label="电话" :span="2">{{
              hazardInfo.resuserphone ?? '-'
            }}</a-descriptions-item>
          </a-descriptions>
          <a-divider v-if="hazardInfo.attachment?.length > 0">附件信息</a-divider>
          <div class="flex-row">
            <a-carousel
              arrows
              :autoplay="true"
              :dots="true"
              effect="fade"
              style="width: 400px; height: 220px"
              dot-position="top"
              v-if="hazardInfo.attachment?.length > 0"
            >
              <template #prevArrow>
                <div class="custom-slick-arrow z-0" style="left: 10px">
                  <LeftOutlined />
                </div>
              </template>
              <template #nextArrow>
                <div class="custom-slick-arrow" style="right: 10px">
                  <RightOutlined />
                </div>
              </template>
              <div
                v-for="(item, index) in hazardInfo.attachment.filter(
                  (item) => item.type == 'png' || item.type == 'jpg',
                )"
              >
                <div class="relativdive">
                  <img class="swipper-img" :src="item.url" />
                  <h3 class="absolute z-10 left-2 inset-y-26 h-15">{{ item.title }}</h3>
                  <div
                    style="background-color: #aeaeae; opacity: 0.4"
                    class="absolute z-10 inset-x-0.2 inset-y-52 h-8"
                  ></div>
                </div>
              </div>
            </a-carousel>
            <a-list
              class="Alist"
              item-layout="horizontal"
              v-if="hazardInfo.attachment?.length > 0"
              :data-source="
                hazardInfo.attachment.filter((item) => item.type !== 'png' && item.type !== 'jpg')
              "
            >
              <template #renderItem="{ item }">
                <a-list-item>
                  <template #actions>
                    <a @click="downloadFile(item)">下载</a>
                  </template>
                  <a-list-item-meta>
                    <template #title>
                      <span>{{ item.title }}</span>
                    </template>
                  </a-list-item-meta>
                </a-list-item>
              </template>
            </a-list>
          </div>
        </div>
        <div style="width: 45%">
          <a-tabs v-model:activeKey="activeKey">
            <a-tab-pane key="1" tab="辨识/上报记录">
              <BasicTable @register="registerIdentifyLogTable">
                <template #tm="{ record }">
                  <span>{{ record.tm ? moment(record.tm).format('YYYY-MM-DD') : '-' }}</span>
                </template>
                <template #identificationresult="{ record }">
                  <a-tag
                    v-if="
                      record.identificationresult !== null &&
                      record.identificationresult !== undefined
                    "
                    :color="
                      identifyOptions.filter((item) => item.value == record.identificationresult)[0]
                        ?.color
                    "
                  >
                    {{
                      identifyOptions.filter((item) => item.value == record.identificationresult)[0]
                        ?.text
                    }}</a-tag
                  >
                </template>
              </BasicTable>
            </a-tab-pane>
            <a-tab-pane key="2" tab="风险等级评价记录">
              <BasicTable @register="registerEduateLogTable">
                <template #tm="{ record }">
                  <span>{{ record.tm ? moment(record.tm).format('YYYY-MM-DD') : '-' }}</span>
                </template>
                <template #risklevel="{ record }">
                  <a-tag
                    v-if="record.risklevel"
                    :color="
                      riskLevelOptions.filter((item) => item.value == record.risklevel)[0]?.color
                    "
                  >
                    {{
                      riskLevelOptions.filter((item) => item.value == record.risklevel)[0]?.text
                    }}</a-tag
                  ></template
                >
              </BasicTable>
            </a-tab-pane>
            <a-tab-pane key="3" tab="整改记录">
              <BasicTable @register="registerCorrectLogTable">
                <template #tm="{ record }">
                  <span>{{ record.tm ? moment(record.tm).format('YYYY-MM-DD') : '-' }}</span>
                </template>
                <template #status="{ record }">
                  <a-tag color="red" v-if="!record.hasdispatch">未派单</a-tag>
                  <a-tag color="orange" v-else-if="record.hasdispatch && !record.hascorrect"
                    >整改中</a-tag
                  >
                  <a-tag
                    color="yellow"
                    v-else-if="record.hasdispatch && record.hascorrect && !record.hascheck"
                    >待验收</a-tag
                  >
                  <a-tag
                    color="green"
                    v-else-if="record.hasdispatch && record.hascorrect && record.hascheck"
                    >已验收</a-tag
                  >
                </template>
              </BasicTable>
            </a-tab-pane>
          </a-tabs>
        </div>
      </div>
    </BasicDrawer>
  </div>
</template>
<script lang="ts">
  import { computed, defineComponent, onMounted, ref, unref } from 'vue';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { BasicTable, useTable } from '/@/components/Table';
  import { useModal } from '/@/components/Modal';
  import { displayTitle } from '/@/utils/QcUnifyUtil';
  import { QcUnifyTransToChildProps } from '/#/QcUnify';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { confirmIdentifyFormSchema } from './hazard.data';
  import { getOneHazardFullInfo } from '/@/api/ehs/hazard';
  const { createMessage } = useMessage();
  import { queryEnumOptions } from '/@/api/platform/enum';
  import { Description } from '/@/components/Description/index';
  import { downloadByUrl } from '/@/utils/file/download';
  import { useGlobSetting } from '/@/hooks/setting';
  import { getFileApi } from '/@/api/platform/file';
  import {
    hazardInfoSchema,
    identifyLogColumns,
    evaluateLogColumns,
    correctLogColumns,
  } from './hazard.data';
  import { QrCode, QrCodeActionType } from '/@/components/Qrcode/index';
  import { QrcodeOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
  import { downloadByUrl } from '/@/utils/file/download';
  import moment from 'moment';
  export default defineComponent({
    components: {
      BasicDrawer,
      BasicTable,
      QrCode,
      QrcodeOutlined,
      LeftOutlined,
      RightOutlined,
    },
    name: 'HazardInfo', // 指定危险源信息查看
    emits: ['register', 'success'],
    setup() {
      const qrRef = ref<Nullable<QrCodeActionType>>(null);
      const activeKey = ref('1');
      const { uploadUrl } = useGlobSetting();
      const qcUnifyProps = ref<QcUnifyTransToChildProps>();
      const dataId = ref();
      const hazardInfo = ref({});
      const identifyLog = ref([]);
      const evaluateLog = ref([]);
      const troubleCorrectLog = ref([]);
      const identifyOptions = ref();
      const riskLevelOptions = ref('');
      const [registerIdentifyLogTable, {}] = useTable({
        dataSource: identifyLog,
        columns: identifyLogColumns,
        pagination: false,
        showIndexColumn: false,
      });
      const [registerEduateLogTable, {}] = useTable({
        dataSource: evaluateLog,
        columns: evaluateLogColumns,
        pagination: false,
        showIndexColumn: false,
      });
      const [registerCorrectLogTable, {}] = useTable({
        dataSource: troubleCorrectLog,
        columns: correctLogColumns,
        pagination: false,
        showIndexColumn: false,
      });
      const [register, { closeDrawer }] = useDrawerInner((data) => {
        activeKey.value = '1';
        identifyLog.value = [];
        evaluateLog.value = [];
        troubleCorrectLog.value = [];
        hazardInfo.value = {};
        if (data != undefined && data != null) {
          let unrefData = unref(data);
          qcUnifyProps.value = unrefData;
          //接收父组件传递的数据
          if (unrefData?.dataId) {
            dataId.value = unrefData.dataId;
            getOneHazardFullInfo(dataId.value).then((res) => {
              hazardInfo.value = {
                ...res.info,
                attachment: res.info.attachment ? returnAttachment(res.info.attachment) : null,
              };
              identifyLog.value = res.identifications;
              evaluateLog.value = res.evaluations;
              troubleCorrectLog.value = res.corrects;
            });
          }
        }
      });

      /**
       * 二维码下载
       */
      function download() {
        const qrEl = unref(qrRef);
        if (!qrEl) return;
        qrEl.download(hazardInfo.value?.hazardname);
      }

      let displayModuleTitle = computed(() => {
        return displayTitle(qcUnifyProps.value);
      });

      /**
       * 返回JSON格式的附件信息数组
       */
      function returnAttachment(attachment) {
        return JSON.parse(attachment).map((item) => {
          let url = uploadUrl + getFileApi + item.id;
          let title = item.name + '.' + item.type;
          return {
            ...item,
            title,
            url,
          };
        });
      }

      /**
       * 下载附件
       */
      function downloadFile(item) {
        downloadByUrl({ url: item.url, fileName: item.name });
      }

      onMounted(() => {
        queryEnumOptions('EhsHazardIndentificationResultTypeEnum,EhsRiskLevelEnum').then((res) => {
          // console.log('option res', res);
          if (res != undefined && res != null && res.length > 0x0) {
            const identifyOp = res[0].options.map((option) => {
              return {
                value: option.key,
                text: option.value,
                color: option.attribute?.split('"')[3],
              };
            });
            const riskOp = res[1].options.map((option) => {
              return {
                value: option.key,
                text: option.value,
                color: option.attribute?.split('"')[3],
              };
            });
            identifyOptions.value = identifyOp;
            riskLevelOptions.value = riskOp;
          }
        });
      });

      return {
        moment,
        qrRef,
        download,
        activeKey,
        register,
        closeDrawer,
        displayModuleTitle,
        hazardInfo,
        identifyOptions,
        riskLevelOptions,
        identifyLog,
        evaluateLog,
        troubleCorrectLog,
        registerIdentifyLogTable,
        registerEduateLogTable,
        registerCorrectLogTable,
      };
    },
  });
</script>
<style lang="less" scoped>
  /* 轮播图的图片的高度为轮播区域高度(20rem)减去上下的边距(合计1rem) */
  @swipper-img-height: 20rem-5rem;

  .ant-carousel :deep(.slick-slide) {
    height: @swipper-img-height;
    line-height: @swipper-img-height;
    background: #dcdcdc;
    overflow: hidden;
  }

  .ant-carousel :deep(.slick-arrow.custom-slick-arrow) {
    width: 25px;
    height: 25px;
    font-size: 25px;
    color: #fff;
    opacity: 0.5;
    z-index: 1;
  }
  .ant-carousel :deep(.custom-slick-arrow:before) {
    display: none;
  }
  .ant-carousel :deep(.custom-slick-arrow:hover) {
    opacity: 0.8;
  }

  .ant-carousel :deep(.slick-slide h3) {
    color: #ffffff;
  }

  //轮播图缩放样式
  .relative {
    width: 100%;
    height: 250px;
  }
  .relativdive {
    width: 100%;
    height: 250px;
  }
  .swipper-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .flex-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }
  .Alist {
    flex: 1;
    margin-left: 10px;
    padding: 0 10px;
    border-left: 1px solid rgb(247, 247, 247);
  }
</style>
